<template>
  <header>
    <div id="Header">
      <!-- Logo -->
      <div id="Logo">
        <div id="LogoContent">
          <router-link to="/">
            <img src="../../assets/images/logo-topbar.gif" alt="Logo"/>
          </router-link>
        </div>
      </div>

      <!-- Menu -->
      <div id="Menu">
        <div id="MenuContent">
<!--          <p>111{{username}}</p>-->
          <!-- Cart -->
          <router-link v-if="username!==null&&username!==''" to="/jpetstore/cart">
            <img align="middle" name="img_cart" src="../../assets/images/cart.gif" alt="Cart"/>
          </router-link >
          <img align="middle" src="../../assets/images/separator.gif" alt="Separator"/>

          <!-- Sign In / Sign Out -->
          <span>
            <router-link v-if="username===null||username===''" to="/login" >Sign In</router-link>
            <router-link v-if="username!==null&&username!==''" to="/" @click.native="signOut">Sign Out</router-link>
            <img align="middle" src="../../assets/images/separator.gif" alt="Separator"/>
          </span>

          <!-- My Account -->
          <router-link v-if="username!==null&&username!==''" to="/editAccount" @click.native="MyAccount">My Account</router-link>

          <!-- Help -->
          <router-link to="/catalog/help">?</router-link>

          <!-- Welcome Message -->
          <span class="welcome-message" v-if="username!==null">
            Welcome, {{ username }}
          </span>
        </div>
      </div>

      <!-- Search -->
      <div id="Search">
        <div id="SearchContent">
          <input v-model="searchContent" class="Search" id="SearchContent" name="keyword"
                 style="border-color: #ff6700"
                 type="text" @input="autoComplete" placeholder="Search"/>
          <a class="Search" id="button-search" type="submit"
             @click="search"
             style="border-color: #ff6700; cursor: pointer;">Search</a>
        </div>
        <!-- Auto-complete dropdown -->
        <ul v-if="autoCompleteResults.length > 0" id="autoComplete">
          <li v-for="(result, index) in autoCompleteResults" :key="index">
            <router-link :to="'/jpetstore/pets/search/' + result">{{ result }}</router-link>
          </li>
        </ul>
      </div>

      <!-- Quick Links -->
      <div id="QuickLinks">
        <router-link to="/catalog/viewCategory?categoryId=FISH" class="productShow" data-name="FISH">
          <img src="../../assets/images/sm_fish.gif" alt="Fish"/>
        </router-link>
        <img src="../../assets/images/separator.gif" alt="Separator"/>
        <router-link to="/catalog/viewCategory?categoryId=DOGS" class="productShow" data-name="DOGS">
          <img src="../../assets/images/sm_dogs.gif" alt="Dogs"/>
        </router-link>
        <img src="../../assets/images/separator.gif" alt="Separator"/>
        <router-link to="/catalog/viewCategory?categoryId=REPTILES" class="productShow" data-name="REPTILES">
          <img src="../../assets/images/sm_reptiles.gif" alt="Reptiles"/>
        </router-link>
        <img src="../../assets/images/separator.gif" alt="Separator"/>
        <router-link to="/catalog/viewCategory?categoryId=CATS" class="productShow" data-name="CATS">
          <img src="../../assets/images/sm_cats.gif" alt="Cats"/>
        </router-link>
        <img src="../../assets/images/separator.gif" alt="Separator"/>
        <router-link to="/catalog/viewCategory?categoryId=BIRDS" class="productShow" data-name="BIRDS">
          <img src="../../assets/images/sm_birds.gif" alt="Birds"/>
        </router-link>
      </div>

    </div>
  </header>
</template>

<script>
import axios from 'axios';

export default {
  name: "Top",
  // props: {
  //   username: {
  //     type: String,
  //     required: false
  //   }
  // },
  data() {
    return {
      username: null,
      searchContent: '',
      autoCompleteResults: []
    };
  },
  mounted() {
    if (this.$route.query.username!==null&&this.$route.query.username!==undefined) {
        //this.username: username
      this.username=this.$route.query.username


      }else{
      this.username = null;
    }
  },
  methods: {
    signOut(){
      this.username=null;
      this.$route.query.username=null
    },
    MyAccount(){
      this.$router.push({
        path: "/editAccount",
        query: { username: this.username }, //传递参数用户名
      })
    },
    search() {
      let keyword = this.searchContent.trim();
      if (keyword !== "") {
        this.$router.push(`/jpetstore/pets/search/${keyword}`);
      }
    },
    autoComplete() {
      let keyword = this.searchContent.trim();
      if (keyword !== "") {
        axios.get(`http://localhost:8080/jpetstore/pets/searchTip?keyword=${keyword}`)
            .then(response => {
              this.autoCompleteResults = response.data.data;
            })
            .catch(error => {
              console.error('Error fetching autoCompleteResults:', error);
            });
      } else {
        this.autoCompleteResults = [];
      }
    }
  }
}
</script>

<style scoped>
/* Styles */
#autoComplete {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
}

#autoComplete li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

#autoComplete li:last-child {
  border-bottom: none;
}

#autoComplete li:hover {
  background-color: #f9f9f9;
  cursor: pointer;
}
</style>
